<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>

    <style>

    </style>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">管理员界面</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


            <form class="navbar-form navbar-left" method="post" action="{% url 'app01_search' %}" target="_blank">
                {% csrf_token %}
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="右边选择搜索对象" id="serach_cont_id" name="content">
                </div>
                <select name="choice" id="select_id" class="form-control">
                    <option value="11">资源</option>
                    <option value="10">班级</option>
                    <option value="100">用户</option>
                    <option value="200">帖子</option>
                    <option value="300">笔记</option>
                </select>
                <!--隐藏的方式将html的路径发送过去-->
                <input hidden value="{{ request.get_full_path_info }}" name="url">
                <input hidden value="admin" name="html">

                <input type="submit" value="提交" class="form-control">
            </form>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">管理员：{{ request.user }}</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"> 个人管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-toggle="modal" data-target="#myModel">修改密码</a></li>
                        <li><a href="{% url 'app01_add_admin' %}">添加管理员</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="{% url 'app01_logout' %}">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{#修改密码模态框开始#}
<!--模态框生效的关键： data-toggle="modal" data-target=".bs-example-modal-lg" id ='Mymodel' -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     id="myModel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-2">
                        <h2 class="text-center">修改密码</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-md-offset-2">
                        <div class="form-group">
                            <label for="set_user">用户名</label>
                            <input type="text" disabled id="set_user"
                                   value="{{ request.user.username }}" class="form-control">

                        </div>
                        <div class="form-group">
                            <label for="id_old_pwd">原密码</label>
                            <input type="password" id="id_old_pwd" class="form-control">


                        </div>
                        <div class="form-group">
                            <label for="id_new_pwd">新密码</label>
                            <input type="password" id="id_new_pwd" class="form-control">

                        </div>
                        <div class="form-group">
                            <label for="id_confirm_pwd">确认密码</label>
                            <input type="password" id="id_confirm_pwd" class="form-control">

                        </div>
                        <p><span style="color: red" id="error"></span></p>
                        <button class="btn btn-success btn-sm" id="id_editer">确定修改</button>
                        <a type="button" class="btn btn-primary btn-sm"
                           data-dismiss="modal" href="{{ url }}">取消修改
                        </a>
                        <br>
                        <br>


                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{#修改密码模态框结束#}

<div class="container-fluid">
    <div class="row">
        {#        左布局开始#}
        <div class="col-md-2">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    管理员
                </a>
                <a href="{% url 'app01_admin_upload' %}" class="list-group-item">上传导入文件</a>
                <a href="{% url 'app01_admin_upload_files' %}" class="list-group-item">管理员文件</a>
                <a href="{% url 'app01_change_admin' %}" class="list-group-item">管理员个人信息</a>
                <a href="{% url 'app01_show_admin' %}" class="list-group-item">普通管理员</a>
            </div>

            <div class="list-group">
                <a href="#" class="list-group-item " style="background-color: rgba(97,241,92,0.23)">
                    管理用户
                </a>
                <a href="{% url 'app01_admin_home' %}" class="list-group-item">学生管理</a>
                <a href="{% url 'app01_admin_teacher' %}" class="list-group-item">老师管理</a>
                <a href="{% url 'app01_admin_add_user' %}" class="list-group-item"> 增加用户 </a>
                 <a href="{% url 'app01_admin_source' %}" class="list-group-item">用户资源管理</a>
                <a href="{% url 'app01_admin_article' %}" class="list-group-item">用户帖子管理</a>
                <a href="{% url 'app01_admin_file' %}" class="list-group-item">用户笔记管理</a>
                <a href="/app01/admin_user_comment/" class="list-group-item">用户评论管理</a>

            </div>

        </div>
        {# 左布局结束       #}
        {#        右布局开始#}
        <div class="col-md-10">
            {% block content %}
                <div class="panel panel-default">
                    <div class="panel-heading">学生管理</div>
                    <div class="panel-body">
                        <table class="table-hover table table-hover">
                            <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>班级</th>
                                <th>邮箱</th>
                                <th>手机</th>
                                <th>操作</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for student in c_page %}
                                <tr>
                                    <td>{{ student.username }}</td>
                                    <td>{{ student.username }}</td>
                                    <td>{{ student.stu_class }}</td>
                                    <td>{{ student.email }}</td>
                                    <td>{{ student.phone }}</td>
                                    <td><a href="#" style="color: indianred" type="button" class="del_btn"
                                           del_id="{{ student.id }}">删除</a></td>

                                    {% if student.limit %}
                                        <td><a href="#" style="color: rgba(83,143,232,0.74)" type="button" class="relax_btn"
                                               relax_id="{{ student.id }}">解除禁言</a></td>
                                    {% else %}
                                        <td><a href="#" style="color: rgba(80,208,163,0.74)" type="button" class="limit_btn"
                                               limit_id="{{ student.id }}">设置禁言</a> </td>

                                    {% endif %}


                                </tr>

                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
                {# 分页显示 #}
                <div class="pager">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {{ page_html }}
                        </ul>
                    </nav>
                </div>
            {% endblock %}


        </div>


        {#        右布局结束#}
    </div>
</div>

{% block js %}
    <script>


        $('.del_btn').click(function () {
            //删除的二次确认
            let op = confirm('确认删除吗？')
            let del_id = $(this).attr('del_id')
            $.ajax({
                url: '',
                type: 'post',
                data: {'del_id': del_id, 'op': op,'delete':''},
                success: function (array) {
                    if (array.code === 100) {
                        alert(array.msg)
                        window.location.reload()
                    } else if (array.code === 200 && op === true) {
                        alert(array.msg)
                    }

                }
            })
        })

        //鼠标获取焦点时，错误信息不显示了。
        $('#id_confirm_pwd').focus(function () {
            $('#error').text('')

        })


        //修改密码的ajax请求

        $('#id_editer').click(function () {

            let old_pwd = $('#id_old_pwd').val()
            let new_pwd = $('#id_new_pwd').val()
            let comfir_pwd = $('#id_confirm_pwd').val()

            $.ajax({
                url: '/app01/set_password/',
                type: 'post',
                data: {'old_pwd': old_pwd, 'new_pwd': new_pwd, 'confirm_pwd': comfir_pwd},
                success: function (attr) {
                    if (attr.code === 1000) {
                        alert(attr.msg)
                        window.location.reload()
                    } else if (attr.code === 2000) {
                        $('#error').text(attr.msg)
                    } else if (attr.code === 3000) {
                        $('#error').text(attr.msg)
                    }
                }
            })


        });
        //设置禁言的事件
        $('.limit_btn').click(function () {
            let limit_id = $(this).attr('limit_id')
            $.ajax({
                url:'',
                type:'post',
                data:{'limit_id':limit_id,'op':1,'limit':''},
                success:function (array) {
                    if(array.code===100){
                        if(array.op===1){
                            alert('禁言成功')
                             window.location.reload()
                        }
                    }
                    else {
                        alert(array.msg)
                    }

                }
            })


        });

        //设置解除禁言的点击事件
        $('.relax_btn').click(function () {
            let relax_id=$(this).attr('relax_id')
            $.ajax({
                url:'',
                type:'post',
                //传递的数据格式是一样的，根据op来决定禁言或解除禁言
                data:{'limit_id':relax_id,'op':0,'limit':''},
                success:function (array) {
                    if(array.code===100){
                        if(array.op===0){
                            alert('解除禁言成功')
                        }

                        window.location.reload()
                    }else {
                        alert(array.msg)
                    }

                }
            })


        });


    </script>
{% endblock %}
</body>
</html>